{% extends "base.html" %}
{% load tools %}

{%  block main-layout %}

<!-- content start -->
{% if app_info %}
<div class="dev_center_module">
    <h4 class="dev_module_title">应用信息</h4>
    <table cellspacing="0" cellpadding="0" border="0" class="paas-table bk-table bk-table-fit bk-table-outer-border bk-table-row-border bk-table-enable-row-transition bk-table-small">
        <thead>
            <tr style="height: 50px;">
                <th width="240px">应用 ID</th>
                <th width="240px">应用名称</th>
                <th width="120px">模块名称</th>
                <th width="120px">环境类型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ app_info.app_code }}</td>
                <td>{{ app_info.app_name }}</td>
                <td>{{ app_info.module }}</td>
                <td>{{ app_info.environment }}</td>
            </tr>
        </tbody>
    </table>
</div>
{% endif %}

<div class="dev_center_module">
    <h4 class="dev_module_title">公有仓库: {{ instance.credentials.public_bucket }}</h4>
    <!-- 设置面板Start -->
    <div class="panel mb20 panel-box">
        <div class="list-justified-container" style="display: flex;">
            <div style="flex-grow: 1; text-align: center; border-right: 1px solid #eee;">
                <span class="title"
                    style="vertical-align: middle;">{{ public_quota.quota_used_rate | humanize_percent }}%</span>
                <p class="text-muted">
                    空间使用率
                </p>
            </div>
            <div style="flex-grow: 1; text-align: center;">
                <p class="title">{{ public_quota.used | humanize_bytes }} /
                    {{ public_quota.max_size | humanize_bytes }}</p>
                <p class="text-muted">已使用 / 总容量</p>
            </div>
        </div>
    </div>
</div>

<div class="dev_center_module">
    <h4 class="dev_module_title">私有仓库: {{ instance.credentials.private_bucket }}</h4>
    <!-- 设置面板Start -->
    <div class="panel mb20 panel-box">
        <div class="list-justified-container" style="display: flex;">
            <div style="flex-grow: 1; text-align: center; border-right: 1px solid #eee;">
                <span class="title"
                    style="vertical-align: middle;">{{ private_quota.quota_used_rate | humanize_percent }}%</span>
                <p class="text-muted">
                    空间使用率
                </p>
            </div>
            <div style="flex-grow: 1; text-align: center;">
                <p class="title">{{ private_quota.used | humanize_bytes }} /
                    {{ private_quota.max_size | humanize_bytes }}</p>
                <p class="text-muted">已使用 / 总容量</p>
            </div>
        </div>
    </div>
</div>


<div class="dev_center_module">
    <h4 class="dev_module_title">实例信息</h4>
    <table cellspacing="0" cellpadding="0" border="0" class="paas-table bk-table bk-table-fit bk-table-outer-border bk-table-row-border bk-table-enable-row-transition bk-table-small">
        <thead>
            <tr style="height: 50px;">
                <th style="width: 300px;">KEY</th>
                <th>VALUE</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="key">BKREPO_USERNAME</td>
                <td>{{ instance.credentials.username }}</td>
            </tr>
            <tr>
                <td class="key">BKREPO_PRIVATE_BUCKET</td>
                <td>{{ instance.credentials.private_bucket }}</td>
            </tr>
            <tr>
                <td class="key">BKREPO_PUBLIC_BUCKET</td>
                <td>{{ instance.credentials.public_bucket }}</td>
            </tr>
            <tr>
                <td class="key">BKREPO_ENDPOINT_URL</td>
                <td>{{ instance.credentials.endpoint_url }}</td>
            </tr>
            <tr>
                <td class="key">BKREPO_PROJECT</td>
                <td>{{ instance.credentials.project }}</td>
            </tr>
            <tr>
                <td class="key">BKREPO_PASSWORD</td>
                <td>{{ instance.credentials.password }}</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="dev_center_module" id="operations" v-if="uid">
    <template>
        <h4 class="dev_module_title mt50">常用操作</h4>
        <div class="action">
            <div class="action-type">
                自助扩容
            </div>
            <div class="action-detail">
                <a class="bk-button bk-primary" title="扩容公开仓库">
                    <span @click="extend_quota('{{ instance.credentials.public_bucket }}')" class="vm">扩容公有仓库</span>
                </a>
                <a class="bk-button bk-warning" title="扩容私有仓库">
                    <span @click="extend_quota('{{ instance.credentials.private_bucket }}')" class="vm">扩容私有仓库</span>
                </a>

                <p class="tip mt5" style="font-size: 13px; color: #888; line-height: 24px;">
                    仅当空间占用超过 50% 时可用，每次扩容大小为1GB，最大不超过10GB
                </p>
                <p class="tip mt5" style="font-size: 13px; color: #888; line-height: 24px;">
                    如有超过10GB的特殊容量需求，请联系<a class="bk-text-button"
                                                href="wxwork://message/?username=BK助手" target="">蓝鲸助手</a>
                </p>
            </div>
        </div>
    </template>
</div>
<!-- content end -->

{% endblock %}


{% block end_of_body %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        let uid = Cookies.get("bk_uid");
        new Vue({
            el: "#operations",
            delimiters: ['$[', ']'],
            data: function () {
                    return {
                        uid: uid,
                    }
            },
            methods: {
                extend_quota: async function (bucket) {
                    let url = `{% url 'instance.manage' instance.uuid '$bucket' %}`.replace("$bucket", bucket)

                    try {
                        let response = await axios.patch(
                            url,
                            {},
                            {
                                withCredentials: true,
                                headers: {
                                    "X-CSRFToken": "{{ csrftoken }}"
                                }
                            }
                        )
                        this.$bkMessage({
                            message: response.data.message
                        })
                    } catch (e) {
                        if (e.response.data?.message) {
                            this.$bkMessage({
                                theme: 'error',
                                message: e.response.data.message
                            })
                        }
                    }
                },
            }
        })
    })
</script>
{% endblock %}
